<template>
	<view class="confirm">
		<view class="type">
			<view class="iconfont icon-wancheng"></view>
			<view class="success">预约成功</view>
		</view>
		<view class="detailBox" v-for="v in contentData" :key="v.title">
			<view class="title">{{ v.title }}</view>
			<view class="detail">{{ v.detail }}</view>
			<text
				:class="v.title == '医院地址' ? 'iconfont icon-daohang-' : ' '"
				@click="goMapNavigation"
			></text>
		</view>
		<view
			style="margin-top: 16rpx;"
			class="detailBox"
			v-for="v in personData"
			:key="v.title"
		>
			<view class="title">{{ v.title }}</view>
			<view class="detail">{{ v.detail }}</view>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
let cancel = ref(null)
let contentData = reactive([
	{
		title: '就诊医院 ',
		detail: '北京市第一人民医院-东院区'
	},
	{
		title: '医院地址',
		detail: '北京市大兴区**路990号'
	},
	{
		title: '就诊科室',
		detail: '消化内科-门诊3楼东区501'
	},
	{
		title: '门诊时间',
		detail: '2020年12月30日 周一 上午'
	},
	{
		title: '候诊时间  ',
		detail: '9：30'
	},
	{
		title: '费用',
		detail: '￥3 （就诊时支付）'
	},
	{
		title: '预约时间',
		detail: '2022年11月12日'
	}
])
let personData = reactive([
	{
		title: '就诊人',
		detail: '张三'
	},
	{
		title: '身份证号 ',
		detail: '610*********0989'
	}
])
// 点击取消按钮
let cancelOpen = () => {
	cancel.value.open('warn')
}
let close = () => {
	cancel.value.close('warn')
}

let confirm = value => {
	uni.navigateTo({
		url: '/pages/allRecord/cancel/cancel'
	})
	cancel.value.close('warn')
}
// 跳转到地图导航
let goMapNavigation = () => {
	uni.navigateTo({
		url: '/pages/nucleicAcidTesting/mapNavigation/mapNavigation'
	})
}
</script>
<style scoped="" lang="less">
.confirm {
	width: 694rpx;
	border: 1px #f4f4f4 solid;
	margin: 24rpx;

	.type {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon-wancheng {
			font-size: 98rpx;
			margin: 24rpx 0;
			color: #006eff;
		}

		.success {
			font-size: 38rpx;
		}
	}

	.confirmBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 628rpx;
		border-bottom: 1px solid #dcdcdd;
		margin: 0 30rpx;
		padding: 34rpx 0;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 4rpx;
		}

		view {
			color: #5c645b;
			font-size: 30rpx;
			margin-left: 26rpx;

			text {
				color: #717677;
				font-size: 26rpx;
				margin-left: 14rpx;
			}
		}
	}

	.detailBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: ;
		width: 628rpx;
		border-bottom: 1px solid #dcdcdd;
		margin: 0 30rpx;
		padding: 36rpx 0;

		.title {
			width: 120rpx;
			height: 34rpx;
			font-size: 28rpx;
			color: #cbbdbf;
			text-align: justify;
			text-align-last: justify;
		}

		.detail {
			color: #6e726e;
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.active {
			color: #f4636f;
		}

		.iconfont {
			margin-left: 34rpx;
			color: #1f80ff;
			font-weight: 700;
		}
	}

	.btn {
		width: 690rpx;
		height: 70rpx;
		color: #006eff;
		font-size: 36rpx;
		background-color: #e4f0ff;
		line-height: 70rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
}
</style>
